<template>
  <div class="margin-t margin-r margin-l column-table">
    <div class="margin-l margin-b margin-r50 c-overflow-h">
      <div class="fl">
        <el-button type="primary" @click="linkToAdd">新增专栏</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
      class="c-width100 color-222 family-PingFangSC-Regular font-s12"
    >
      <el-table-column align="center" label="名称">
        <template slot-scope="scope">
          <div class="clearfix">
            <div class="fl margin-r">
              <img :src="scope.row.avatar" height="68" width="102" alt />
            </div>
            <div class="fl">
              <div class="margin-t10 font-s14 color-222 text-alignL">{{scope.row.name}}</div>
              <div class="margin-t10 font-s12 color-999 text-alignL">&yen;{{scope.row.price}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="原价" prop="price"></el-table-column>
      <el-table-column align="center" label="售价">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.ColumnPrice"
            style="width:100px;"
            controls-position="right"
          ></el-input-number>元
          <el-button
            size="small"
            type="primary"
            @click="saveColumnPrice(scope.row.catId,scope.row.ColumnPrice)"
          >保存</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课时数">
        <template slot-scope="scope">暂含课时{{scope.row.cont}}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="contentAdmin(scope.row.catId)">内容管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page.sync="currentPage"
      :total="total"
    ></el-pagination>
    <div class="block text-c">
      <!--分页组件 current-page:当前页   -->
      <!--   page-sizes:每页几条数据（选项）   -->
      <!--   page-size:每页几条数据   -->
      <!--   total:总条数   -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listQuery.total"
      ></el-pagination>-->
    </div>
  </div>
</template>

<script>
import { special } from "@/api/member";
export default {
  data() {
    return {
      tableData: [],
      listQuery: {
        order: 3,
        selectValue: null,
        searchName: null
      },
      currentPage: null, // 当前页
      total: null // 数据总条数
    };
  },
  watch: {
    currentPage(val) {
      this.getColumnList(val);
    }
  },
  methods: {
    saveColumnPrice(id, price) {
      let data = {
        catId: id,
        price: price
      };
      special(data).then(res => {
        this.$message(res.data.data);
        console.log(res.data.data);
      });
      this.getColumnList(1);
    },
    contentAdmin(id) {
      this.$router.push({
        path: "columnsEdit",
        query: {
          catId: id
        }
      });
    },
    getColumnList(page) {
      special({ page: page }).then(res => {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
      });
    },
    linkToAdd() {
      this.$router.push({ path: `/shopManage/courseCategory` });
    }
  },
  mounted() {
    this.getColumnList();
  }
};
</script>
<style>
.column-table .el-table th > .cell {
  height: 30px;
  line-height: 30px;
}
</style>
<style scoped>
h3 {
  background: #eee;
  border-bottom: 1px solid #eee;
  padding-left: 20px;
  font-weight: 500;
  font-size: 12px;
  line-height: 30px;
  margin: 0;
}
.tdedit {
  display: inline;
  background: url(../../assets/tdedit.gif) no-repeat no-repeat right 0;
  padding-right: 14px;
}
.editInput {
  height: 22px;
  width: 40px;
}
.btn-sortBy {
  width: 140px;
}
</style>
